.bubble
{
width:300px;
height:50px;
background-color:Green;
background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));
background-image: -webkit-linear-gradient(top, Green, Yellow);
background-image: -moz-linear-gradient(top, Green, Yellow);
background-image: -ms-linear-gradient(top, Green, Yellow);
background-image: -o-linear-gradient(top, Green, Yellow);
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.square
{
width:200px;
height:200px;
background-color:Blue;
background-image: -webkit-gradient(linear, -45% 0%,0% 0%, from(Green), to(Yellow));
background-image: -webkit-linear-gradient(-45deg, Green, Yellow);
background-image: -moz--linear-gradient(-45deg, Green, Yellow);
background-image: -ms-linear-gradient(-45deg, Green, Yellow);
background-image: -o-linear-gradient(-45deg, Green, Yellow);
}
.radial-center
{
width:100px;
height:100px;
background-color:Red;
background-position:center center;
background-repeat:no-repeat;
background: -moz-radial-gradient(circle,black,red);
background: -webkit-gradient(radial, center center, 0, center center, 200, from(black), to(red));
background: -webkit-radial-gradient(circle,black,red);
background: -ms-radial-gradient(circle,black,red);
background: -o-radial-gradient(circle,black,red);
}
.radial-closest
{
width:200px;
height:200px;
background-color:#2F2727;
background-repeat:no-repeat;
background-image: -webkit-radial-gradient(50px 50px,circle closest-side,#1a82f7, #2F2727);
background-image: -moz-radial-gradient(50px 50px,circle closest-side,#1a82f7, #2F2727);
background-image: -ms-radial-gradient(50px 50px, circle closest-side,#1a82f7, #2F2727);
}
.radial-closest-corner
{
width:200px;
height:200px;
background-color:#2F2727;
background-repeat:no-repeat;
background-image: -webkit-radial-gradient(50px 50px,circle closest-corner,#1a82f7, #2F2727);
background-image: -moz-radial-gradient(50px 50px,circle closest-corner,#1a82f7, #2F2727);
background-image: -ms-radial-gradient(50px 50px, circle closest-corner,#1a82f7, #2F2727);
}
.radial-farther-side
{
width:200px;
height:200px;
background-color:#2F2727;
background-repeat:no-repeat;
background-image: -webkit-radial-gradient(50px 50px,circle farthest-side,#1a82f7, #2F2727);
background-image: -moz-radial-gradient(50px 50px,circle farthest-side,#1a82f7, #2F2727);
background-image: -ms-radial-gradient(50px 50px, circle farthest-side,#1a82f7, #2F2727);
}
.radial-farther-corner
{
width:200px;
height:200px;
background-color:#2F2727;
background-repeat:no-repeat;
background-image: -webkit-radial-gradient(50px 50px,circle farthest-corner,#1a82f7, #2F2727);
background-image: -moz-radial-gradient(50px 50px,circle farthest-corner,#1a82f7, #2F2727);
background-image: -ms-radial-gradient(50px 50px, circle farthest-corner,#1a82f7, #2F2727);
}
.circle-radial
{
width:100px;
height:100px;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
background-color:#2F2727;
background-repeat:no-repeat;
background-image: -webkit-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);
background-image: -moz-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);
background-image: -ms-radial-gradient(20px 20px, circle farthest-side,#1a82f7, #2F2727);
}
.circle-radial2
{
width:100px;
height:100px;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
background: -ms-repeating-radial-gradient(30% 40%, red ,red 10px, black 10px, black 20px);
}
.square-linear2
{
width:100px;
height:100px;
background: -ms-repeating-radial-gradient(red, red 10px, black 10px,black 20px);
}
Leave Comment